<template>
  <div class="root">
    <div class="adv">
      <div>一点一滴</div>
      <div>从小白变成大佬</div>
    </div>
    <div class="avatar">
      <el-avatar :size="70" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
    </div>
    <div class="btn">
      <el-button type="success" round style="width: 120px; " @click="centerDialogVisible=true">注册 / 登录</el-button>
    </div>
    <div class="publish">
      前端小水滴出品
    </div>
    <el-dialog
      title="登录"
      :visible.sync="centerDialogVisible"
      width="35%"
      :close-on-click-modal="false"
      center>
      <div style="text-align: center">

        <el-input class="username"
          placeholder="请输入用户名"
          v-model="username"
          clearable="clearable"
          prefix-icon="el-icon-user"
        >
        </el-input>
        <el-input class="password" placeholder="请输入密码" v-model="password" show-password="show-password" prefix-icon="el-icon-lock">
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="login" style="width: 350px;">登 录</el-button>
        <div style="text-align: right;width: 350px;margin: 15px auto auto;">
          <div style="font-size: 12px;margin-top: 8px;color:#67C23A;">去注册</div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Person",
    data(){
      return {
        centerDialogVisible:false,
        username:'',
        password:'',
      }
    },
    methods:{
      login(){
        this.$http.post('login',{username:this.username,password:this.password}).then(result=>{
          console.log(result);
        });
      }
    }
  }
</script>

<style scoped lang="less">
  .root {
    background-color: lemonchiffon;
    width: 200px;
    height: 360px;
    border-radius: 5px;
  }

  .adv {
    margin-top: 25px;
  }

  .avatar {
    margin-top: 40px;
  }

  .btn {
    .el-button {
      line-height: 7px;
    }

    margin-top: 40px;
  }

  .publish {
    margin-top: 50px;
    font-size: 12px;
    color: #999999;
  }

  .username,
  .password{
    width: 350px;
  }

  .username{
    margin-bottom: 30px;
  }

  /deep/ .el-icon-user:before,
  /deep/ .el-icon-lock:before{
    font-size: 24px !important;
    margin-left: 5px;
  }

  /deep/ .el-input__inner{
    padding-left: 40px !important;
  }

</style>